<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <header class="header">
      <div v-for="(item, index) in topInputList" :key="index" class="everyBox">
        <span class="span">{{ item.title }}：</span>
        <el-input
          placeholder=""
          v-model="item.text"
          :placeholder="item.title"
          class="top-input"
        ></el-input>
      </div>
      <!-- <div class="everyBox slelctBox">
        <span class="span">商品状态：</span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          @change="opctionchangeOne"
          clearable
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div> -->
      <div class="everyBox slelctBox">
        <span class="span">状态：</span>
        <el-select
          v-model="value2"
          placeholder="请选择"
          @change="opctionchangeTwo"
          clearable
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="reset"
          >重置</el-button
        >
      </div>
      <div style="margin: 0 10px">
        <download-excel
          :fields="exportDataStandard"
          :data="multipleSelection1"
          type="xls"
          :name="exportName"
          :defaultValue="exportDefaultValue"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button type="primary" icon="el-icon-download">导出</el-button>
        </download-excel>
      </div>
    </header>
    <div class="body">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="aftersales_id"
          label="售后单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="order_id"
          label="订单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status_text"
          label="状态"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="type_text"
          label="商品状态"
          width="170"
        >
        </el-table-column>
        <!-- <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户"
          width="100"
        >
        </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="refund"
          label="退款金额"
          width="80"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="liyou" label="原因">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="utime" label="申请时间">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="checkOrder(scope.row)" size="mini"
              >明细</el-button
            >
            <el-button
              @click="caozuo(scope.$index, scope.row)"
              size="mini"
              v-if="scope.row.status == 1"
              >操作</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="售后单查看"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="售后单号">{{
          orderDetails.aftersales_id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          orderDetails.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="退款金额">{{
          orderDetails.refund
        }}</el-descriptions-item>
        <el-descriptions-item label="售后类型">{{
          orderDetails.status_text
        }}</el-descriptions-item>
        <el-descriptions-item label="状态" :span="2">{{
          orderDetails.type_text
        }}</el-descriptions-item>
        <el-descriptions-item label="图片" :span="2">
          <el-image
            style="width: 100px; height: 100px; margin: 0 20px"
            fit="cover"
            v-for="(item, index) in orderDetails.Aimages"
            :key="index"
            :preview-src-list="orderDetails.Aimages"
            :src="item"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="售后商品" :span="2">
          <el-table
            :data="orderDetails.items"
            style="width: 110px"
            border
            max-height="180"
          >
            <el-table-column show-overflow-tooltip prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="nums" label="售后数量"> </el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item label="原因" :span="1">{{
          orderDetails.liyou
        }}</el-descriptions-item>
        <el-descriptions-item label="问题描述" :span="1">{{
          orderDetails.reason
        }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{
          orderDetails.mark
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog
      title="售后单审核"
      :visible.sync="dialogVisible2"
      width="50%"
      :before-close="handleClose2"
    >
      <el-descriptions title="" :column="2" size="mini">
        <el-descriptions-item label="售后单号" :span="2">{{
          orderDetails.aftersales_id
        }}</el-descriptions-item>
        <el-descriptions-item label="订单号" :span="1">{{
          orderDetails.order_id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          orderDetails.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="原因" :span="1">{{
          orderDetails.liyou
        }}</el-descriptions-item>
        <el-descriptions-item label="问题描述" :span="1">{{
          orderDetails.reason
        }}</el-descriptions-item>
        <el-descriptions-item label="图片" :span="2">
          <el-image
            style="width: 100px; height: 100px; margin: 0 20px"
            fit="cover"
            v-for="(item, index) in orderDetails.Aimages"
            :key="index"
            :preview-src-list="orderDetails.Aimages"
            :src="item"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="退货商品" :span="2">
          <el-table
            ref="multipleTableO"
            :data="orderDetails.items"
            border
            max-height="180"
            style="width: 110px"
            @selection-change="handleSelectionChange1"
          >
            <el-table-column show-overflow-tooltip type="selection" width="55">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="name" label="商品名称">
            </el-table-column>
            <el-table-column
              prop="order_items_nums"
              label="购买数量"
              width="80"
            >
            </el-table-column>
            <el-table-column prop="numsValue" label="售后数量" width="80">
            </el-table-column>

            <el-table-column label="退货数量" width="80">
              <template slot-scope="scope">
                <el-input
                  class="numsInput"
                  v-model="scope.row.nums"
                  @input="inputChange(scope.row, scope.row.nums)"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item label="退款金额" :span="2">
          <el-input
            style="width: 100px"
            v-model="orderDetails.type == 3 ? '0' : orderDetails.refund"
          >
          </el-input>
          <span style="margin-left: 20px"
            >订单支付金额：{{ orderDetails.payed }},已退款金额：{{
              orderDetails.refunds
            }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item label="是否发货" :span="2">
          <el-radio v-model="isDeliver" label="1" @input="deliverInput"
            >未发货</el-radio
          >
          <el-radio v-model="isDeliver" label="2" @input="deliverInput"
            >已发货</el-radio
          >
          <el-radio v-model="isDeliver" label="3" @input="deliverInput"
            >换货</el-radio
          >
        </el-descriptions-item>
        <el-descriptions-item label="审核结果" :span="2">
          <el-radio v-model="pass" label="2" @input="passInput">通过</el-radio>
          <el-radio v-model="pass" label="3" @input="passInput">拒绝</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          <el-input v-model="orderDetails.mark" style="width: 50%"></el-input>
          <!--          <el-input v-model="orderDetails.reason" style="width: 50%"></el-input>-->
        </el-descriptions-item>
        <el-descriptions-item label="说明" :span="2">
          2123123
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeVisible">取 消</el-button>
        <el-button type="primary" @click="save">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { shouhouList, shouhoushenhe } from "../../../../utils/api";
export default {
  name: "shouhou",
  data() {
    return {
      exportDataStandard: {
        售后单号: "aftersales_id",
        订单号: "order_id",
        状态: "status_text",
        售后类型: "type_text",
        用户: "ship_name",
        退款总金额: "refunds",
        申请时间: "ctime",
        申请原因: "reason",
        // 商品名称: "itemsName",
        // 商品编码: "bn",
        // 退货数量: "nums",
      },
      exportName: "导出订单",
      // exportDefaultValue: "这一行这一列没有数据",
      exportDefaultValue: " ",
      multipleSelection1: [],
      imgHeader: this.Global.imgHeader,

      token: sessionStorage.getItem("token"),
      topInputList: [
        { title: "售后单号", text: "" },
        { title: "订单号", text: "" },
        // { title: "用户手机号", text: "" },
      ],
      options1: [
        {
          value: "1",
          label: "未收到货",
        },
        {
          value: "2",
          label: "已收到货",
        },
      ],
      options2: [
        {
          value: "1",
          label: "未审核",
        },
        {
          value: "2",
          label: "审核通过",
        },
        {
          value: "3",
          label: "审核拒绝",
        },
      ],
      value1: "",
      value2: "",
      loading: true,
      tableData: [],
      limit: 10,
      currentPage: 1,
      total: 0,
      status: "", //status售后状态 1=未审核 2=审核通过 3=审核拒绝'
      type: "",
      aftersales_id: "",
      mobile: "",
      order_id: "",
      dialogVisible: false,
      dialogVisible2: false,
      orderDetails: {},
      multipleSelection: [],
      isDeliver: "1",
      pass: "",
    };
  },
  beforeDestory() {
    this.$bus.$off("bus-event"); // 取消 bus-event 事件
    this.$bus.$off(); // 取消全部事件
  },
  methods: {
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    createExportData() {
      return this.multipleSelection1;
    },
    startDownload() {
      console.log(this.multipleSelection1, "选择");
      if (this.multipleSelection1.length <= 0) {
        this.$message("请选择要下载的数据");
      } else {
        this.$message("下载中···");
      }
    },
    finishDownload() {
      this.$message({
        message: "下载成功",
        type: "success",
      });
      // 下载成功取消选择
      this.toggleSelection();
    },
    derive() {},
    handleClose() {
      this.dialogVisible = false;
      this.orderDetails = {};
    },
    // checkSelectable(row){
    //   console.log(row,123123)
    // },
    isNumber(value) {
      //验证是否为数字
      let patrn = /^(-)?\d+(\.\d+)?$/;
      if (patrn.exec(value) == null || value == "") {
        return false;
      } else {
        return true;
      }
    },
    inputChange(e, v) {
      // if (!this.isNumber(v)) {
      //   // alert("不是有效的数字");
      //   // this.$message.error("不是有效的数字");
      //   this.$message({
      //     message: "不是有效的数字",
      //     type: "error",
      //   });
      // }
      let reg = /^[1-9]+[0-9]*]*$/;
      if (!reg.test(v)) {
        this.$message({
          message: "请输入正整数",
          type: "error",
        });
      }
      if (v > e.numsValue) {
        e.nums = e.numsValue;
        return;
      }
    },
    inputChange2() {
      let reg = /^[0-9]+.?[0-9]*$/;
      if (!reg.test(this.orderDetails.refund)) {
        this.$message({
          message: "不是有效的数字",
          type: "error",
        });
      }
    },
    checkOrder(row) {
      this.dialogVisible = true;
      this.orderDetails = row;
    },
    caozuo(index, row) {
      this.pass = "";
      this.orderDetails = JSON.parse(JSON.stringify(row));
      this.multipleSelection = this.orderDetails.items;
      this.isDeliver = this.orderDetails.type.toString();
      this.dialogVisible2 = true;
      // console.log(this.multipleSelection, 999);
      this.$nextTick(() => {
        if (this.multipleSelection) {
          this.multipleSelection.forEach((row) => {
            this.$refs.multipleTableO.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
    handleClose2() {
      this.dialogVisible2 = false;
      this.pass = "";
      this.orderDetails = {};
    },
    closeVisible() {
      this.dialogVisible2 = false;
      this.orderDetails = {};
      this.pass = "";
    },
    // 是否发货
    deliverInput(e) {
      this.orderDetails.type = Number(e);

      console.log(this.orderDetails.type);
    },
    // 是否通过
    passInput(e) {
      this.orderDetails.status = Number(e);
    },
    save() {
      console.log(this.orderDetails);
      // console.log(window.websocket.send(2));
      if (this.orderDetails.status == 1) {
        this.$message("请选择审核结果");
        return;
      }
      // console.log(this.orderDetails)
      let items = [];
      this.multipleSelection.forEach((item) => {
        items.push({ id: item.order_items_id, nums: item.nums });
      });
      if (!this.isNumber(items[0].nums)) {
        this.$message("退货数量请输入数字");
        return;
      }
      let reg1 = /^[1-9]+[0-9]*]*$/;
      if (!reg1.test(items[0].nums)) {
        this.$message({
          message: "退货数量请输入正整数",
          type: "error",
        });
        return;
      }
      let reg2 = /^[0-9]+.?[0-9]*$/;
      if (!reg2.test(this.orderDetails.refund)) {
        this.$message({
          message: "退款金额请输入有效数字",
          type: "error",
        });
        return;
      }
      // if (!Math.floor(items[0].nums) === items[0].nums) {
      //   this.$message("退货数量请输入整数");
      //   return;
      // }
      console.log(items, 1111);
      console.log(this.orderDetails);
      shouhoushenhe(
        this.token,
        this.orderDetails.aftersales_id,
        this.orderDetails.type == 3 ? 0 : this.orderDetails.refund,
        JSON.stringify(items),
        this.orderDetails.type,
        this.orderDetails.status,
        this.orderDetails.mark ? this.orderDetails.mark : ""
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
            onClose: (res) => {
              this.$emit("back");
              let msg = { type: "u_order_songsui" };
              window.websocket.send(JSON.stringify(msg));
            },
          });
          this.getList(
            this.token,
            this.currentPage,
            this.limit,
            this.status,
            this.type,
            this.aftersales_id,
            // this.mobile,
            this.order_id
          );
        } else {
          this.$message.error(res.data.msg);
        }
        this.pass = "";
      });
      this.dialogVisible2 = false;
      this.orderDetails = {};
    },
    search() {
      this.aftersales_id = this.topInputList[0].text;
      this.order_id = this.topInputList[1].text;
      // this.mobile = this.topInputList[2].text;
      this.currentPage = 1;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.status,
        this.type,
        this.aftersales_id,
        // this.mobile,
        this.order_id
      );
    },
    reset() {
      this.aftersales_id = "";
      this.topInputList[0].text = "";
      this.order_id = "";
      this.topInputList[1].text = "";
      this.status = "";
      this.value2 = "";
      // this.mobile = this.topInputList[2].text;
      this.currentPage = 1;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.status,
        this.type,
        this.aftersales_id,
        // this.mobile,
        this.order_id
      );
    },
    opctionchangeOne(e) {
      console.log(e);
    },
    opctionchangeTwo(e) {},
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.status,
        this.type,
        this.aftersales_id,
        // this.mobile,
        this.order_id
      );
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.status,
        this.type,
        this.aftersales_id,
        // this.mobile,
        this.order_id
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection, "文件");
    },
    handleSelectionChange1(val) {},

    getList(token, page, limit, status, type, aftersales_id, order_id) {
      this.loading = true;
      shouhouList(token, page, limit, status, type, aftersales_id, order_id, 2)
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            // console.log(this.tableData);
            this.tableData.forEach((item) => {
              if (item.items) {
                item.items.forEach((item2) => {
                  item2.numsValue = item2.nums;
                });
              }
              item.Aimages = [];
              item.images.forEach((item2) => {
                item.Aimages.push(this.imgHeader + item2.image_id);
              });
              if (item.status == 1) {
                item.status_text = "未审核";
              }
              if (item.status == 2) {
                item.status_text = "审核通过";
              }
              if (item.status == 3) {
                item.status_text = "审核拒绝";
              }
              if (item.type == 1) {
                item.type_text = "仅退款";
              }
              if (item.type == 2) {
                item.type_text = "退货退款";
              }
              if (item.type == 3) {
                item.type_text = "仅换货";
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            this.loading = false;
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          let timer = setTimeout(() => {
            this.loading = false;
            this.tableData = [];
            clearTimeout(timer);
            console.log(err);
          }, 10000);
        });
    },
  },
  created() {
    this.getList(
      this.token,
      this.currentPage,
      this.limit,
      this.status,
      this.type,
      this.aftersales_id,
      this.mobile,
      this.order_id
    );
  },
  watch: {
    value1(n, o) {
      if (n == 111) {
        this.value1 = "";
      }
      this.type = this.value1;
      console.log(this.type);
    },
    value2(n, o) {
      if (n == 111) {
        this.value2 = "";
      }
      this.status = this.value2;
    },
    multipleSelection: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        let list = [];
        val.forEach((item) => {
          console.log(item);
          // item.items.forEach((item2) => {
          list.push({
            aftersales_id: item.aftersales_id,
            order_id: item.order_id,
            type_text: item.type_text,
            status_text: item.status_text,
            ship_name: item.nickname,
            refunds: item.refunds,
            ctime: item.ctime,
            reason: item.reason,
            // itemsName: item2.name,
            // bn: item2.bn,
            // nums: item2.nums,
          });
          // });
        });
        this.multipleSelection1 = list;
        console.log(list, "list");
      },
      deep: true, //true 深度监听
    },
  },
};
</script>

<style scoped>
.body {
  margin: 20px 0;
}

.slelctBox {
  margin: 0 10px;
}

.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.header .span {
  font-size: initial;
}

/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.top-input {
  width: 150px;
  margin-right: 20px;
}

/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}

/deep/.el-table .cell.el-tooltip {
  text-align: center;
}

/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}

/deep/.numsInput .el-input__inner {
  height: 20px;
  line-height: 20px;
}
</style>
